<template>
  <footer class="footer" v-if="list.length>0">
    <span class="todo-count"><strong>{{leftCount}}</strong>剩余</span>
    <ul class="filters">
      <li>
        <a @click.prevent="filter('all')" :class="{selected: type==='all'}" href="#/">全部</a>
      </li>
      <li>
        <a @click.prevent="filter('active')" :class="{selected: type==='active'}" href="#/active">进行中</a>
      </li>
      <li>
        <a @click.prevent="filter('completed')" :class="{selected: type==='completed'}" href="#/completed">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" v-show="isShowClear" @click="clear">清除已完成</button>
  </footer>
</template>

<script>
export default {
  //   footer  组件通过 props接受传递过来的数据
  props: {
    list: {
      type: Array,
      required: true,
    },
    type: String
  },
  //    准备 type 数据 记录点击按钮
  data() {
    return {
      // type: 'all'
    }
  },

  //  filter 组件提供了 属性用于 统计 未完成的任务
  //  把  list  传过来
  //  数据  没有时 ?  隐藏footer   :v-if="list.length>0
  computed: {
    showList() {
      if (this.type === 'completed') { // 显示已完成
        return this.list.filter(item => item.isDone == true)
      } else if (this.type === 'active') { // 显示未完成
        return this.list.filter(item => item.isDone === false)
      } else {
        return this.list  // 全部显示
      }
    },

    //   获取 所有未完成的 数量
    leftCount() {
      return this.list.filter(item => item.isDone === false).length
    },
    //  如果 list 中 有一个或者 多个未完成的任务 就会显示
    //  小于  1  就会 隐藏
    isShowClear() {
      return this.list.some((item) => item.isDone)
    }
  },
  methods: {
    //  触发  clear 事件 
    clear() {
      // 清空已完成的任务  过滤 保留 未完成的
      this.$emit("clear")
    },
    filter(type) {
      // this.type = type   子组件 用 filter接受 父组件 传过来的信息
      this.$emit('changeType', type)
    },
  },
  watch: {
    list: {
      deep: true,
      handler(newValue) {
        localStorage.setItem('todoList', JSON.stringify(newValue))
      }
    }
  }
}
</script>

<style>
</style>